<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- this is an example from the MDN Layout Cookbook -->
    <title>CSS Cookbook: media objects</title>

    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 0;
            margin: 0;
        }

        img {
            max-width: 100%;
        }

        p {
            margin: 0 0 1em 0;
        }

        @media (min-width: 500px) {
            .media {
                display: grid;
                grid-template-columns: fit-content(200px) 1fr;
                grid-template-rows: 1fr auto;
                grid-template-areas:
                    "image content"
                    "image footer";
                grid-gap: 20px;
                margin-bottom: 4em;
            }

            .media-flip {
                grid-template-columns: 1fr fit-content(250px);
                grid-template-areas:
                    "content image"
                    "footer image";
            }

            .media>.media {
                grid-column-start: 2;
            }

            .media-flip>.media {
                grid-column-start: 1;
            }

            .img {
                grid-area: image;
            }

            .content {
                grid-area: content;
            }

            .footer {
                grid-area: footer;
            }

        }
    </style>

</head>

<body>

    <div class="media">

        <div class="img">
            <img src="balloon-sq2.jpg" alt="Balloons">
        </div>

        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                condimentum.</p>
        </div>
        <div class="footer">
            An optional footer goes here.
        </div>
    </div>

    <div class="media">

        <div class="img">
            <img src="sharp-account_box-24px.svg" width="80px" alt="Account">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                condimentum.</p>
        </div>
        <div class="footer"></div>
    </div>

    <div class="media media-flip">

        <div class="img">
            <img src="balloon-sq2.jpg" alt="Balloons">
        </div>

        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                condimentum.</p>
        </div>
        <div class="footer">
            An optional footer goes here.
        </div>
    </div>

    <div class="media">

        <a class="img">
            <img src="balloon-sq2.jpg" alt="Balloons">
        </a>

        <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                condimentum.</p>
        </div>

        <div class="footer"></div>

        <div class="media">

            <a class="img">
                <img src="balloon-sq2.jpg" alt="Balloons">
            </a>

            <div class="content">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                    maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
                    tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
                    venenatis condimentum.</p>
            </div>

            <div class="footer"></div>

        </div>

    </div>




</html>